import React, { useState } from "react";
import { Button } from "antd";

interface PanelInterFace {
	title : string;
	children : React.ReactNode;
	isActive : boolean;
	onShow : () => void;
}

const Panel = (
	{
		title,
		children,
		isActive,
		onShow
	} : PanelInterFace
) => {
	return (
		<section >
			<h3 >{ title }</h3 >
			{ isActive ? <p >{ children }</p > : <Button onClick={ onShow } >Show</Button > }
		</section >
	);
};

const Accordion = () => {

	const [ activeIndex, setActiveIndex ] = useState( 0 );

	return (
		<>
			<h2 >Almaty, Kazakhstan</h2 >
			<Panel title="About" isActive={ activeIndex === 0 } onShow={ () => setActiveIndex( 0 ) } >
				With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its
				capital city.
			</Panel >
			<Panel title="Etymology" isActive={ activeIndex === 1 } onShow={ () => setActiveIndex( 1 ) } >
				The name comes from <span lang="kk-KZ" >алма</span >,
				the Kazakh word for "apple" and is often translated as "full of apples".
			</Panel >
		</>
	);
};
export default Accordion;